<template>
  <div name="detailnav" class="detailnav" id="nav">
    <div class="nav_content con_width">
      <div class="title">RedmiBook 13 独显</div>
      <div class="con_box">
        <div class="left">
          <span>|</span>
          <router-link to class="com_name">RedmiBook 13 集显</router-link>
        </div>
        <div class="right">
          <router-link to class="alink">概述</router-link>
          <span>|</span>
          <router-link to class="alink">参数</router-link>
          <span>|</span>
          <router-link to class="alink">F 码通道</router-link>
          <span>|</span>
          <router-link to class="alink">用户评价</router-link>
          <router-link to="/comdetail" v-if="false">
            <div class="buy_btn">立即购买</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//监听滚动事件
window.onscroll = function() {
  // 滚动时当前位置距顶部的距离
  var topScroll = document.documentElement.scrollTop;
  // 获取导航id
  var nav = document.getElementById("nav");
  // 滚动距离大于多少时执行下面事件
  if (topScroll > 128) {
    // console.log(ihkh)
    // 到了那个距离相当于给了导航定位
    nav.style.position = "fixed";
    nav.style.top = "0";
    nav.style.zIndex = "99";
  } else {
    // 小于的时候让他恢复原状
    nav.style = "";
  }
};
export default {};
</script>

<style lang="scss" scoped>
@import "./DetailNav.scss";
</style>